/*
 * @Author: Yuelei 
 * @Date: 2018-03-17 11:39:47 
 * @Last Modified by: Yuelei
 * @Last Modified time: 2018-03-22 09:55:47
 */
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router,Route,Link,Switch,Redirect} from 'react-router-dom'

// 页面
import Layout from 'component/layout/index.jsx';
import Home from 'page/home/index.jsx';
import Login from 'page/login/index.jsx';
import Order from 'page/order/index.jsx';
import Error from 'page/error/index.jsx'
import UserList from 'page/user/index.jsx'
class App extends React.Component{
  constructor(props){
    super(props);
    
  }
  
  render(){
    // 单独抽出路由
    let LayoutRouter =(
      <Layout>
               {/*  <Switch>只匹配第一个匹配到的 */}
                 <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/product' component={Home} />
                    <Route exact path='/product-category' component={Home} />
                    <Route exact path='/order' component={Order} />
                    <Route exact path='/user/index' component={UserList} />
                    <Redirect exact from='/user' to='/user/index' />
                    <Route component={Error} />
                 </Switch>
               </Layout>
    );
    return ( 
      <Router>
        {/* Router里面根据路径显示组件 */}
        {/* 让home直接渲染在layout里面 */}
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/" render={(props)=>LayoutRouter } />
        </Switch>
       
      </Router>
     
    );
  }
}

ReactDOM.render(<App />,
  document.getElementById('app')
)
